<script setup lang="ts">
import { inject, computed } from 'vue'
import { dropdownSymbol } from './dropdownContext'

const props = defineProps<{ value?: string | number }>()

const dropdownContext = inject(dropdownSymbol)

const handleClick = () => {
  if (!props.value) return
  dropdownContext?.select(props.value)
}

const active = computed(() => dropdownContext?.selected.value === props.value)

</script>

<template>
  <div @click="handleClick" class="kx-dropdown-item">
    <slot :active="active"></slot>
  </div>
</template>
